<template>
    <div class=" search_box">
        <div class="input-group" style="width:100%">

            <form _lpchecked="1">
                <div class="rows">
                    <el-form v-if="searchData && have" ref="form">
                        <el-row class="schemas-search">
                            <el-col style="width: 16%;" class="form-group form-input" v-for="schema in schemas" :key="schema.key">
                                <!--<label style="padding-left: 5px">{{schema.name}}</label>-->
                                <lar-form-ceil v-if="schema"
                                               :data="searchData"
                                               :schema="schema"
                                               action="search"
                                               @searchModel="searchData[schema.key]['searchModel'] = $event"
                                               v-model.lazy="searchData[schema.key]['value']">
                                </lar-form-ceil>
                            </el-col>
                            <el-col :span="24" class="form-group">
                                <div>
                                    <!--<label>&nbsp;</label>-->
                                    <!--<el-button type="primary" size="medium" @click="toSearch()">搜 索</el-button>-->
                                    <slot name="search"></slot>
                                    <el-button type="default" size="mini" class="reset-btn" @click="clearSearch()">重 置</el-button>
                                    <el-button v-show="advSchemas.length!==0" type="default" size="mini" class="shai-btn"
                                               @click="showSearch = !showSearch">
                                        高级筛选<i class="el-icon-arrow-down" style="position: relative;left: 6px"></i>
                                    </el-button>
                                </div>
                            </el-col>
                        </el-row>
                        <div class="top-search"  v-show="showSearch">
                            <el-row style="padding:10px 0">
                                <el-col :span="24" style="font-size:16px;">高级筛选</el-col>
                            </el-row>
                            <el-row>
                                <el-col style="width: 16%;overflow: hidden;" class="form-group form-inputs" v-for="schema in advSchemas" :key="schema.key">
                                    <!--<label style="padding-left: 5px">{{schema.name}}</label>-->
                                    <lar-form-ceil v-if="schema"
                                                   :data="searchData"
                                                   :schema="schema"
                                                   action="search"
                                                   @searchModel="searchData[schema.key]['searchModel'] = $event"
                                                   v-model.lazy="searchData[schema.key]['value']">
                                    </lar-form-ceil>
                                </el-col>
                            </el-row>
                        </div>

                    </el-form>
                    <div v-else>
                        <slot name="search"></slot>
                    </div>
                </div>
            </form>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';

    export default {
        props: {
            model: {
                type: String,
            },
            schemas: {
                type: [Object, Array],
                default: function () {
                    return [];
                },
            },
            advSchemas: {
                type: [Object, Array],
                default: function () {
                    return [];
                },
            },
            pipeName: {String},
            default: '',
        },
        data() {
            return {
                searchData: [],
                showSearch: false,
                delay: 2000,//毫秒,延迟执行
                timeout: null,
            }
        },
        created: function () {
//          this.initData();
//             console.info(this.searchData);
            this.searchData = this.$store.getters.getPipe(this.pipeName);
        },
        computed: {
            have() {
                return this.schemas.length == 0 ? false : true;
            }
//            pipe() {
//                return this.$store.getters.getPipe(this.pipeName);
//            },
        },

        watch: {
            schemas: function () {
                this.initData();
            },
            advSchemas: function () {
                this.initData();
            },
            model: function () {
                this.initData();
            },
//            pipe(){
//                this.searchData = this.pipe;
//            },
            searchData: {
                handler(newValue) {
                    // console.info('newValue',newValue)
                    clearTimeout(this.timeout);
                    this.timeout = setTimeout(() => {
                        this.update(newValue)
                    }, 500)

                },
                deep: true
            }
        },
        methods: {
            update(newValue) {
                let data;
                if (newValue) {
                    data = JSON.parse(JSON.stringify(newValue));
                } else {
                    data = [];
                }
                // console.info('data',data);
                this.$store.commit('pipe', {'value': data, 'name': this.pipeName});
                // this.$emit('input', data);
            },
            initData() {
                let schemas = {};
                for (let key in this.schemas) {
                    let name = this.schemas[key]['key'];
                    schemas[name] = {};
                }
                if (this.advSchemas) {
                    for (let key in this.advSchemas) {
                        let name = this.advSchemas[key]['key'];
                        schemas[name] = {};
                    }
                }
                this.searchData = schemas;
                this.loading = false;
            },
            searchModel(value) {
                console.log(value);
            },
            toSearch() {
            },  // 去搜索
            clearSearch() { // 去清空
                for (let key in this.searchData) {
                   Vue.set(this.searchData[key], 'value',null);
                }
                this.update(this.searchData);
            }

            //获取配置

        }
    }
</script>
<style lang="less">
    .schemas-search .form-input:nth-of-type(5n + 2){
        margin:0 5%;
    }
    .schemas-search .form-input:nth-of-type(5n + 4){
        margin:0 5%;
    }
    .top-search .form-inputs:nth-of-type(5n + 2){
        margin:0 5%;
    }
    .top-search .form-inputs:nth-of-type(5n + 4){
        margin:0 5%;
    }
</style>
<style lang="less" scoped>
        .reset-btn{
            background: rgba(0,150,136,0.05);
            border: 1px solid #009688;
            color: #009688;
        }
        .reset-btn:hover{
            color: #5FB878;
            border: 1px solid #5FB878;
        }
        /*.shai-btn{*/
            /*border: 1px solid #999;*/
        /*}*/
        .shai-btn:hover{
            color: #5FB878;
            border: 1px solid #5FB878;
        }
    .search_box .form-group {
        margin-bottom:16px;
    }

    .search_box .el-form-item__content {
        margin-left: 0 !important;
    }

    .search_box .help-block {
        display: none;
    }
    .top-search{
        overflow: hidden;
        border-radius:4px;
        padding:0 14px;
        border:1px solid rgba(0,150,136,1);
        background-color: rgba(95,184,120,0.02);
        margin-bottom: 20px;
    }
    /*@media screen and (max-width: 1400px) {*/
        /*.search_box .form-group {*/
            /*margin-right: 6px;*/
        /*}*/
    /*}*/
</style>
